Real-time data visualization একটি গুরুত্বপূর্ণ উপাদান, যা ডেটা পরিবর্তন হওয়ার সাথে সাথে তা গ্রাফিক্যালি উপস্থাপন করে। এটি বিভিন্ন ক্ষেত্র যেমন ব্যবসা, অর্থনীতি, স্বাস্থ্যসেবা, এবং প্রযুক্তি ক্ষেত্রে ডেটার অবস্থান এবং প্রবণতা অনুসরণ করতে সহায়ক। Dashboard একটি ইন্টারফেস সরবরাহ করে যা ব্যবহারকারীদের একাধিক চার্ট এবং গ্রাফের মাধ্যমে ডেটার প্রতি মুহূর্তের আপডেট দেখতে সাহায্য করে।

এই প্রক্রিয়া Google Charts ব্যবহার করে Angular অ্যাপ্লিকেশনে বাস্তবায়ন করা যেতে পারে। এখানে আমরা দেখব কিভাবে Angular এর মাধ্যমে একটি real-time data dashboard তৈরি করা যায়।

Real-Time Data Visualization: গুরুত্বপূর্ণ ধারণা

• Real-Time Data: এটি সেই ডেটা যা সঠিক মুহূর্তে পরিবর্তিত হয় এবং তাৎক্ষণিকভাবে প্রদর্শিত হয়।
• Dashboard: এটি একটি ইউজার ইন্টারফেস যা ডেটা, চার্ট, এবং গ্রাফের মাধ্যমে একটি সিস্টেমের অবস্থা বা পরিসংখ্যান উপস্থাপন করে।
• Data Binding: Angular এ ডেটা বাইনডিং ব্যবহার করে ডেটা অটোমেটিকভাবে UI এ আপডেট হয়।

Step-by-Step: Real-Time Data Dashboard with Google Charts in Angular

এখানে আমরা একটি real-time data dashboard তৈরি করব, যেখানে Google Charts ব্যবহার করে বিভিন্ন চার্টের মাধ্যমে ডেটা ভিজুয়ালাইজেশন করা হবে। আমরা একটি Pie Chart এবং Line Chart ব্যবহার করব, যা ডেটার পরিবর্তনের সাথে সাথে আপডেট হবে।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন, অথবা যদি আপনার একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন।

ng new realtime-dashboard
cd realtime-dashboard

Step 2: Install angular-google-charts

Google Charts ব্যবহার করার জন্য angular-google-charts লাইব্রেরিটি ইনস্টল করতে হবে:

npm install angular-google-charts

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, GoogleChartsModule Angular অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এর জন্য app.module.ts ফাইলে নিচের কোডটি যোগ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Real-Time Data for Dashboard

এখন, app.component.ts ফাইলে ডেটা তৈরি করা হবে যা প্রতি মুহূর্তে পরিবর্তিত হবে। এখানে আমরা একটি সার্ভিস ব্যবহার করব যা প্রতি 5 সেকেন্ড পর পর ডেটা আপডেট করবে।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Real-Time Dashboard';

  // Chart Type
  chartType = 'PieChart'; 
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: '100%',
    height: 400
  };

  lineChartType = 'LineChart';
  lineChartData = [
    ['2021-01-01', 10],
    ['2021-01-02', 15],
    ['2021-01-03', 12],
    ['2021-01-04', 17]
  ];

  lineChartOptions = {
    title: 'Monthly Sales',
    curveType: 'function',
    width: '100%',
    height: 400
  };

  ngOnInit() {
    setInterval(() => {
      this.updateData();
    }, 5000); // Update data every 5 seconds
  }

  // Function to update data for Pie Chart
  updateData() {
    // Randomize the data for demo purposes
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', Math.floor(Math.random() * 10)],
      ['Eat', Math.floor(Math.random() * 5)],
      ['Commute', Math.floor(Math.random() * 4)],
      ['Watch TV', Math.floor(Math.random() * 3)],
      ['Sleep', Math.floor(Math.random() * 9)]
    ];

    // Randomize the data for Line Chart
    const newData = [
      ['2021-01-05', Math.floor(Math.random() * 20)],
      ['2021-01-06', Math.floor(Math.random() * 20)],
      ['2021-01-07', Math.floor(Math.random() * 20)],
      ['2021-01-08', Math.floor(Math.random() * 20)]
    ];

    this.lineChartData = [...this.lineChartData, ...newData];
  }
}

• এখানে updateData ফাংশনটি প্রতি 5 সেকেন্ড পর পর ডেটা আপডেট করবে এবং নতুন মান যোগ করবে।
• Pie Chart এবং Line Chart এর ডেটা প্রতি 5 সেকেন্ডে পরিবর্তিত হবে, এটি real-time আপডেট দেখাবে।

Step 5: Dashboard Layout

এখন, app.component.html ফাইলে দুইটি চার্টের জন্য কন্টেইনার তৈরি করুন।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<div id="dashboard">
  <div class="chart-container">
    <h2>Daily Activities</h2>
    <google-chart 
      [type]="chartType" 
      [data]="chartData" 
      [options]="chartOptions">
    </google-chart>
  </div>

  <div class="chart-container">
    <h2>Sales Trend</h2>
    <google-chart 
      [type]="lineChartType" 
      [data]="lineChartData" 
      [options]="lineChartOptions">
    </google-chart>
  </div>
</div>

এখানে, দুইটি চার্ট - Pie Chart এবং Line Chart দুটি প্রদর্শিত হবে।

Step 6: CSS for Layout

এখন, app.component.css ফাইলে ড্যাশবোর্ডের জন্য সিম্পল লেআউট তৈরি করা হবে:

app.component.css ফাইল:

#dashboard {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.chart-container {
  width: 48%;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .chart-container {
    width: 100%;
  }
}

এখানে, flexbox ব্যবহার করে চার্ট দুটি সমান্তরালে স্থাপন করা হয়েছে এবং media queries এর মাধ্যমে মোবাইল ডিভাইসের জন্য চার্টগুলো পুরোপুরি একসাথে দেখানোর ব্যবস্থা করা হয়েছে।

Step 7: Run the Application

এখন অ্যাপ্লিকেশন চালানোর জন্য কমান্ডটি ব্যবহার করুন:

ng serve

এটি http://localhost:4200 এ রান করবে, যেখানে আপনি real-time dashboard দেখতে পারবেন। এখানে Pie Chart এবং Line Chart প্রতি 5 সেকেন্ড পর পর ডেটা আপডেট করবে।

সারাংশ

Real-time Data Visualization-এর মাধ্যমে আপনি Angular অ্যাপে Google Charts ব্যবহার করে ড্যাশবোর্ড তৈরি করতে পারেন। Angular এর মাধ্যমে ডেটা আপডেট করা এবং Google Charts এর মাধ্যমে ডেটা ভিজুয়ালাইজেশন করা সহজ হয়। এই প্রক্রিয়াতে real-time data, dashboard layout, এবং data binding ব্যবহার করে একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ ড্যাশবোর্ড তৈরি করা যায়।